ரியாக்ட் சஸ்பென்ஸ் லோடிங் நிலை கலவை: அடுக்கடுக்கான லோடிங் மேலாண்மை

ரியாக்ட் 16.6 இல் அறிமுகப்படுத்தப்பட்ட ரியாக்ட் சஸ்பென்ஸ் (React Suspense), உங்கள் பயன்பாட்டில் லோடிங் நிலைகளைக் கையாள்வதற்கான ஒரு அறிவிப்பு வழியை வழங்குகிறது. இது ஒரு காம்போனென்ட்டின் (component) சார்புகள் (தரவு அல்லது குறியீடு போன்றவை) தயாராகும் வரை அதன் ரெண்டரிங்கை "நிறுத்திவைக்க" உங்களை அனுமதிக்கிறது. இதன் அடிப்படைப் பயன்பாடு ஒப்பீட்டளவில் எளிமையானதாக இருந்தாலும், சஸ்பென்ஸை முழுமையாகக் கற்றுக்கொள்வது, குறிப்பாக அடுக்கடுக்கான லோடிங் சூழ்நிலைகளைக் கையாளும் போது, லோடிங் நிலைகளை எவ்வாறு திறம்படக் கலப்பது என்பதைப் புரிந்துகொள்வதை உள்ளடக்கியது. இந்த கட்டுரை ரியாக்ட் சஸ்பென்ஸ் மற்றும் ஒரு மென்மையான மற்றும் ஈர்க்கக்கூடிய பயனர் அனுபவத்திற்கான அதன் மேம்பட்ட கலவை நுட்பங்களுக்கான ஒரு விரிவான வழிகாட்டியை வழங்குகிறது.

ரியாக்ட் சஸ்பென்ஸ் அடிப்படைகளைப் புரிந்துகொள்வது

அதன் மையத்தில், சஸ்பென்ஸ் என்பது ஒரு ரியாக்ட் காம்போனென்ட் ஆகும், இது ஒரு fallback ப்ரோப்பை (prop) ஏற்கிறது. சஸ்பென்ஸால் சுற்றப்பட்ட காம்போனென்ட்(கள்) எதையாவது லோட் செய்யக் காத்திருக்கும் போது இந்த ஃபால்பேக் ரெண்டர் செய்யப்படுகிறது. மிகவும் பொதுவான பயன்பாட்டு நிகழ்வுகள் பின்வருவனவற்றை உள்ளடக்குகின்றன:

• React.lazy உடன் குறியீடு பிளவு (Code Splitting): ஆரம்ப பண்டல் அளவைக் குறைக்க காம்போனென்ட்களை மாறும் வகையில் இறக்குமதி செய்தல்.
• தரவு மீட்டெடுத்தல் (Data Fetching): ஒரு API இலிருந்து தரவு தீர்க்கப்படும் வரை காத்திருந்து, பின்னர் அதைச் சார்ந்துள்ள காம்போனென்ட்டை ரெண்டர் செய்தல்.

React.lazy உடன் குறியீடு பிளவு (Code Splitting)

React.lazy ஆனது ரியாக்ட் காம்போனென்ட்களை தேவைக்கேற்ப லோட் செய்ய உங்களை அனுமதிக்கிறது. இது உங்கள் பயன்பாட்டின் ஆரம்ப லோடிங் நேரத்தை கணிசமாக மேம்படுத்தும், குறிப்பாக பல காம்போனென்ட்களைக் கொண்ட பெரிய பயன்பாடுகளுக்கு. இங்கே ஒரு அடிப்படை எடுத்துக்காட்டு:

            import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், MyComponent தேவைப்படும்போது மட்டுமே லோட் செய்யப்படுகிறது. அது லோட் ஆகும்போது, fallback (இந்தச் சந்தர்ப்பத்தில், ஒரு எளிய "Loading..." செய்தி) காண்பிக்கப்படுகிறது.

சஸ்பென்ஸ் உடன் தரவு மீட்டெடுத்தல் (Data Fetching)

React.lazy ஆனது சஸ்பென்ஸ் உடன் உடனடியாக வேலை செய்தாலும், தரவு மீட்டெடுப்புக்கு சற்று வேறுபட்ட அணுகுமுறை தேவைப்படுகிறது. சஸ்பென்ஸ் ஆனது fetch அல்லது axios போன்ற நிலையான தரவு மீட்டெடுப்பு நூலகங்களுடன் நேரடியாக ஒருங்கிணைக்கப்படவில்லை. அதற்குப் பதிலாக, தரவுக்காகக் காத்திருக்கும்போது ஒரு காம்போனென்ட்டை "நிறுத்திவைக்க"க்கூடிய ஒரு நூலகம் அல்லது வடிவத்தைப் பயன்படுத்த வேண்டும். பிரபலமான ஒரு தீர்வு swr அல்லது react-query போன்ற தரவு மீட்டெடுப்பு நூலகத்தைப் பயன்படுத்துவது, அல்லது ஒரு தனிப்பயன் வள மேலாண்மை உத்தியைச் செயல்படுத்துவது.

ஒரு தனிப்பயன் வள மேலாண்மை அணுகுமுறையைப் பயன்படுத்தும் ஒரு கருத்தியல் எடுத்துக்காட்டு இங்கே:

            // Resource.js
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise.then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }
      return result;
    },
  };
};

export default createResource;

// MyComponent.js
import React from 'react';
import createResource from './Resource';

const fetchData = () =>
  new Promise((resolve) =>
    setTimeout(() => resolve({ data: 'Fetched Data!' }), 2000)
  );

const resource = createResource(fetchData());

function MyComponent() {
  const data = resource.read();
  return <p>{data.data}</p>;
}

export default MyComponent;

// App.js
import React, { Suspense } from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <Suspense fallback={<p>Loading data...</p>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

விளக்கம்:

• createResource: இந்தச் செயல்பாடு ஒரு ப்ராமிஸை (promise) எடுத்துக்கொண்டு, ஒரு read முறையுடன் ஒரு ஆப்ஜெக்ட்டை (object) வழங்குகிறது.
• read: இந்த முறை ப்ராமிஸின் நிலையைச் சரிபார்க்கிறது. அது நிலுவையில் இருந்தால் (pending), அது ப்ராமிஸை வீசுகிறது, இது காம்போனென்ட்டை நிறுத்திவைக்கிறது. அது தீர்க்கப்பட்டால் (resolved), அது தரவை வழங்குகிறது. அது நிராகரிக்கப்பட்டால் (rejected), அது பிழையை வீசுகிறது.
• MyComponent: இந்த காம்போனென்ட் தரவை அணுக resource.read() முறையைப் பயன்படுத்துகிறது. தரவு தயாராக இல்லை என்றால், காம்போனென்ட் நிறுத்திவைக்கப்படுகிறது.
• App: MyComponent ஐ Suspense இல் சுற்றி, தரவு லோட் ஆகும்போது ஒரு ஃபால்பேக் பயனர் இடைமுகத்தை வழங்குகிறது.

லோடிங் நிலைகளைக் கலப்பது: அடுக்கடுக்கான சஸ்பென்ஸின் சக்தி

சஸ்பென்ஸின் உண்மையான சக்தி அதன் கலக்கும் திறனில் (ability to be composed) உள்ளது. அதிக நுணுக்கமான மற்றும் அதிநவீன லோடிங் அனுபவங்களை உருவாக்க நீங்கள் சஸ்பென்ஸ் காம்போனென்ட்களை அடுக்கடுக்காக வைக்கலாம். இது பல ஒத்திசைவற்ற சார்புகளைக் கொண்ட காம்போனென்ட்களைக் கையாளும் போது அல்லது உங்கள் பயனர் இடைமுகத்தின் (UI) சில பகுதிகளை லோடிங் செய்வதை நீங்கள் முன்னுரிமைப்படுத்த விரும்பும் போது மிகவும் பயனுள்ளதாக இருக்கும்.

அடிப்படை அடுக்கடுக்கான சஸ்பென்ஸ்

ஒரு பக்கம் தலைப்பு (header), முக்கிய உள்ளடக்கம் (main content) மற்றும் ஒரு பக்கப்பட்டி (sidebar) ஆகியவற்றைக் கொண்டிருப்பதாக ஒரு சூழ்நிலையை கற்பனை செய்வோம். இந்த ஒவ்வொரு காம்போனென்ட்டும் அதன் சொந்த ஒத்திசைவற்ற சார்புகளைக் கொண்டிருக்கலாம். ஒவ்வொரு பகுதிக்கும் வெவ்வேறு லோடிங் நிலைகளைத் தனித்தனியாகக் காட்ட அடுக்கடுக்கான சஸ்பென்ஸ் காம்போனென்ட்களை நீங்கள் பயன்படுத்தலாம்.

            import React, { Suspense, lazy } from 'react';

const Header = lazy(() => import('./Header'));
const MainContent = lazy(() => import('./MainContent'));
const Sidebar = lazy(() => import('./Sidebar'));

function App() {
  return (
    <div>
      <Suspense fallback={<p>Loading header...</p>}>
        <Header />
      </Suspense>
      <div style={{ display: 'flex' }}>
        <Suspense fallback={<p>Loading main content...</p>}>
          <MainContent />
        </Suspense>
        <Suspense fallback={<p>Loading sidebar...</p>}>
          <Sidebar />
        </Suspense>
      </div>
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், ஒவ்வொரு காம்போனென்ட்டும் (Header, MainContent, மற்றும் Sidebar) அதன் சொந்த சஸ்பென்ஸ் எல்லைக்குள் (boundary) சுற்றப்பட்டுள்ளது. இதன் பொருள், Header இன்னும் லோட் ஆகிக் கொண்டிருந்தால், "Loading header..." செய்தி காண்பிக்கப்படும், அதே நேரத்தில் MainContent மற்றும் Sidebar தனித்தனியாக லோட் ஆக முடியும். இது மேலும் பதிலளிக்கக்கூடிய மற்றும் தகவலறிந்த பயனர் அனுபவத்தை அனுமதிக்கிறது.

லோடிங் நிலைகளுக்கு முன்னுரிமை அளித்தல்

சில சமயங்களில், உங்கள் பயனர் இடைமுகத்தின் (UI) சில பகுதிகளை லோடிங் செய்வதற்கு நீங்கள் முன்னுரிமை அளிக்க விரும்பலாம். உதாரணமாக, தலைப்பு மற்றும் வழிசெலுத்தல் (navigation) முக்கிய உள்ளடக்கத்திற்கு முன் லோட் செய்யப்படுவதை நீங்கள் உறுதிப்படுத்த விரும்பலாம். சஸ்பென்ஸ் காம்போனென்ட்களை மூலோபாய ரீதியாக அடுக்கடுக்காக வைப்பதன் மூலம் இதை நீங்கள் அடையலாம்.

            import React, { Suspense, lazy } from 'react';

const Header = lazy(() => import('./Header'));
const MainContent = lazy(() => import('./MainContent'));

function App() {
  return (
    <Suspense fallback={<p>Loading header and content...</p>}>
      <Header />
      <Suspense fallback={<p>Loading main content...</p>}>
        <MainContent />
      </Suspense>
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், Header மற்றும் MainContent இரண்டும் ஒரு ஒற்றை, வெளிப்புற சஸ்பென்ஸ் எல்லைக்குள் சுற்றப்பட்டுள்ளன. இதன் பொருள், Header மற்றும் MainContent இரண்டும் லோட் ஆகும் வரை "Loading header and content..." என்ற செய்தி காண்பிக்கப்படும். MainContent க்கான உள் சஸ்பென்ஸ் Header ஏற்கனவே லோட் செய்யப்பட்டிருந்தால் மட்டுமே தூண்டப்படும், இது உள்ளடக்கப் பகுதிக்கு மேலும் நுணுக்கமான லோடிங் அனுபவத்தை வழங்குகிறது.

மேம்பட்ட அடுக்கடுக்கான லோடிங் மேலாண்மை

அடிப்படை அடுக்கடுக்கான அமைப்பிற்கு அப்பால், சிக்கலான பயன்பாடுகளில் லோடிங் நிலைகளை நிர்வகிக்க நீங்கள் மேம்பட்ட நுட்பங்களைப் பயன்படுத்தலாம். இவற்றில் அடங்கும்:

• தனிப்பயன் ஃபால்பேக் காம்போனென்ட்கள்: பார்வைக்கு கவர்ச்சிகரமான மற்றும் தகவலறிந்த லோடிங் குறிகாட்டிகளைப் பயன்படுத்துதல்.
• பிழை எல்லைகளுடன் பிழை கையாளுதல்: லோடிங் போது ஏற்படும் பிழைகளை சீராகக் கையாளுதல்.
• டெபவுன்சிங் (Debouncing) மற்றும் த்ரோட்லிங் (Throttling): ஒரு காம்போனென்ட் தரவை லோட் செய்ய முயற்சிக்கும் எண்ணிக்கையை மேம்படுத்துதல்.
• சஸ்பென்ஸ்ஸை மாற்றங்களுடன் (Transitions) இணைத்தல்: லோடிங் மற்றும் லோட் செய்யப்பட்ட நிலைகளுக்கு இடையே மென்மையான மாற்றங்களை உருவாக்குதல்.

தனிப்பயன் ஃபால்பேக் காம்போனென்ட்கள்

எளிய உரைச் செய்திகளை ஃபால்பேக்காகப் பயன்படுத்துவதற்குப் பதிலாக, சிறந்த பயனர் அனுபவத்தை வழங்கும் தனிப்பயன் ஃபால்பேக் காம்போனென்ட்களை நீங்கள் உருவாக்கலாம். இந்த காம்போனென்ட்கள் இவற்றைக் கொண்டிருக்கலாம்:

• ஸ்பின்னர்ஸ் (Spinners): அனிமேட்டட் லோடிங் குறிகாட்டிகள்.
• ஸ்கெலட்டன்கள் (Skeletons): உண்மையான உள்ளடக்கத்தின் அமைப்பைப் பிரதிபலிக்கும் பிளேஸ்ஹோல்டர் பயனர் இடைமுக கூறுகள்.
• புரோக்ரஸ் பார்கள் (Progress Bars): லோடிங் முன்னேற்றத்தின் காட்சி குறிகாட்டிகள்.

ஒரு ஸ்கெலட்டன் காம்போனென்ட்டை ஃபால்பேக்காகப் பயன்படுத்துவதற்கான ஒரு எடுத்துக்காட்டு இங்கே:

            import React from 'react';
import Skeleton from 'react-loading-skeleton'; // You'll need to install this library

function LoadingSkeleton() {
  return (
    <div>
      <Skeleton count={3} />
    </div>
  );
}

export default LoadingSkeleton;

// Usage in App.js
import React, { Suspense, lazy } from 'react';
import LoadingSkeleton from './LoadingSkeleton';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<LoadingSkeleton />}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

MyComponent லோட் ஆகும்போது தொடர்ச்சியான ஸ்கெலட்டன் பிளேஸ்ஹோல்டர்களைக் காண்பிக்க இந்த எடுத்துக்காட்டு react-loading-skeleton நூலகத்தைப் பயன்படுத்துகிறது.

பிழை எல்லைகளுடன் பிழை கையாளுதல்

லோடிங் செயல்முறையின் போது ஏற்படக்கூடிய பிழைகளைக் கையாள்வது முக்கியம். ரியாக்ட் பிழை எல்லைகளை (Error Boundaries) வழங்குகிறது, இவை அவற்றின் குழந்தை காம்போனென்ட் ட்ரீயில் எங்கு நடந்தாலும் ஜாவாஸ்கிரிப்ட் பிழைகளைப் பிடித்து, அந்த பிழைகளைப் பதிவுசெய்து, ஒரு ஃபால்பேக் பயனர் இடைமுகத்தைக் காண்பிக்கும் காம்போனென்ட்கள் ஆகும். வலுவான பிழை கையாளுதல் வழிமுறையை வழங்க பிழை எல்லைகள் சஸ்பென்ஸ் உடன் சிறப்பாக செயல்படுகின்றன.

            import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

// Usage in App.js
import React, { Suspense, lazy } from 'react';
import ErrorBoundary from './ErrorBoundary';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<p>Loading...</p>}>
        <MyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், ErrorBoundary காம்போனென்ட் Suspense காம்போனென்ட்டைச் சுற்றுகிறது. MyComponent லோட் ஆகும்போது ஒரு பிழை ஏற்பட்டால், ErrorBoundary அந்த பிழையைப் பிடித்து, "ஏதோ தவறு நடந்துவிட்டது." என்ற செய்தியைக் காண்பிக்கும்.

டெபவுன்சிங் (Debouncing) மற்றும் த்ரோட்லிங் (Throttling)

சில சந்தர்ப்பங்களில், ஒரு காம்போனென்ட் தரவை லோட் செய்ய முயற்சிக்கும் எண்ணிக்கையை நீங்கள் கட்டுப்படுத்த விரும்பலாம். தரவு மீட்டெடுக்கும் செயல்முறை விலை உயர்ந்ததாக இருந்தால் அல்லது அதிகப்படியான API அழைப்புகளைத் தடுக்க விரும்பினால் இது பயனுள்ளதாக இருக்கும். இதை அடைய டெபவுன்சிங் மற்றும் த்ரோட்லிங் ஆகிய இரண்டு நுட்பங்கள் உங்களுக்கு உதவும்.

டெபவுன்சிங் (Debouncing): ஒரு செயல்பாடு கடைசியாக அழைக்கப்பட்டதிலிருந்து ஒரு குறிப்பிட்ட கால அளவு கடந்த பிறகு அதன் செயல்பாட்டை தாமதப்படுத்துகிறது.

த்ரோட்லிங் (Throttling): ஒரு செயல்பாடு செயல்படுத்தப்படும் வீதத்தை வரம்புக்குட்படுத்துகிறது.

இந்த நுட்பங்கள் பெரும்பாலும் பயனர் உள்ளீட்டு நிகழ்வுகளுக்குப் பயன்படுத்தப்பட்டாலும், சஸ்பென்ஸ் எல்லைகளுக்குள் தரவு மீட்டெடுப்பைக் கட்டுப்படுத்தவும் இவற்றைப் பயன்படுத்தலாம். செயலாக்கம் நீங்கள் பயன்படுத்தும் குறிப்பிட்ட தரவு மீட்டெடுப்பு நூலகம் அல்லது வள மேலாண்மை உத்தியைப் பொறுத்தது.

சஸ்பென்ஸ்ஸை மாற்றங்களுடன் (Transitions) இணைத்தல்

ரியாக்ட் ட்ரான்சிஷன்ஸ் API (React 18 இல் அறிமுகப்படுத்தப்பட்டது) உங்கள் பயன்பாட்டில் வெவ்வேறு நிலைகளுக்கு இடையே, லோடிங் மற்றும் லோட் செய்யப்பட்ட நிலைகள் உட்பட, மென்மையான மாற்றங்களை உருவாக்க உங்களை அனுமதிக்கிறது. ஒரு ஸ்டேட் அப்டேட் ஒரு ட்ரான்சிஷன் என்பதைக் குறிக்க useTransition ஐப் பயன்படுத்தலாம், இது பயனர் இடைமுகத்தில் (UI) ஏற்படும் திடீர் மாற்றங்களைத் தடுக்க உதவும்.

            import React, { Suspense, lazy, useState, useTransition } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  const [isPending, startTransition] = useTransition();
  const [showComponent, setShowComponent] = useState(false);

  const handleClick = () => {
    startTransition(() => {
      setShowComponent(true);
    });
  };

  return (
    <div>
      <button onClick={handleClick} disabled={isPending}>
        {isPending ? 'Loading...' : 'Load Component'}
      </button>
      {showComponent && (
        <Suspense fallback={<p>Loading component...</p>}>
          <MyComponent />
        </Suspense>
      )}
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், "Load Component" பட்டனைக் கிளிக் செய்வது ஒரு மாற்றத்தைத் தூண்டுகிறது. ரியாக்ட் MyComponent இன் லோடிங்கை முன்னுரிமைப்படுத்தும், அதே நேரத்தில் பயனர் இடைமுகத்தை (UI) பதிலளிக்கும் வகையில் வைத்திருக்கும். isPending நிலை ஒரு மாற்றம் நடைபெறுகிறதா என்பதைக் குறிக்கிறது, இது பட்டனை முடக்கவும் மற்றும் பயனருக்கு காட்சி பின்னூட்டத்தை (visual feedback) வழங்கவும் உங்களை அனுமதிக்கிறது.

நிஜ உலக எடுத்துக்காட்டுகள் மற்றும் சூழ்நிலைகள்

அடுக்கடுக்கான சஸ்பென்ஸின் நடைமுறைப் பயன்பாடுகளை மேலும் விளக்குவதற்கு, சில நிஜ உலக சூழ்நிலைகளை நாம் கருத்தில் கொள்வோம்:

• இ-காமர்ஸ் தயாரிப்புப் பக்கம்: ஒரு தயாரிப்புப் பக்கம் தயாரிப்பு விவரங்கள், மதிப்புரைகள் மற்றும் தொடர்புடைய தயாரிப்புகள் போன்ற பல பிரிவுகளைக் கொண்டிருக்கலாம். ஒவ்வொரு பிரிவும் அடுக்கடுக்கான சஸ்பென்ஸ் எல்லைகளைப் பயன்படுத்தி தனித்தனியாக லோட் செய்யப்படலாம். பயனர் மிக முக்கியமான தகவல்களை விரைவாகப் பார்ப்பதை உறுதிசெய்ய தயாரிப்பு விவரங்களின் லோடிங்கிற்கு நீங்கள் முன்னுரிமை அளிக்கலாம்.
• சமூக ஊடக ஃபீட்: ஒரு சமூக ஊடக ஃபீட் இடுகைகள், கருத்துகள் மற்றும் பயனர் சுயவிவரங்களைக் கொண்டிருக்கலாம். இந்த ஒவ்வொரு காம்போனென்ட்டும் அதன் சொந்த ஒத்திசைவற்ற சார்புகளைக் கொண்டிருக்கலாம். தரவு லோட் ஆகும்போது ஒவ்வொரு பிரிவிற்கும் ஒரு பிளேஸ்ஹோல்டர் பயனர் இடைமுகத்தைக் காண்பிக்க அடுக்கடுக்கான சஸ்பென்ஸ் உங்களை அனுமதிக்கிறது. தனிப்பயனாக்கப்பட்ட அனுபவத்தை வழங்க பயனரின் சொந்த இடுகைகளின் லோடிங்கிற்கும் நீங்கள் முன்னுரிமை அளிக்கலாம்.
• டாஷ்போர்டு பயன்பாடு: ஒரு டாஷ்போர்டு பல விட்ஜெட்களைக் கொண்டிருக்கலாம், ஒவ்வொன்றும் வெவ்வேறு மூலங்களிலிருந்து தரவைக் காண்பிக்கும். ஒவ்வொரு விட்ஜெட்டையும் தனித்தனியாக லோட் செய்ய அடுக்கடுக்கான சஸ்பென்ஸ் பயன்படுத்தப்படலாம். இது பயனர் பிற விட்ஜெட்கள் லோட் ஆகும்போது கிடைக்கக்கூடிய விட்ஜெட்களைப் பார்க்க அனுமதிக்கிறது, இது மேலும் பதிலளிக்கக்கூடிய மற்றும் ஊடாடும் அனுபவத்தை உருவாக்குகிறது.

எடுத்துக்காட்டு: இ-காமர்ஸ் தயாரிப்புப் பக்கம்

ஒரு இ-காமர்ஸ் தயாரிப்புப் பக்கத்தில் அடுக்கடுக்கான சஸ்பென்ஸை நீங்கள் எவ்வாறு செயல்படுத்தலாம் என்பதைப் பார்ப்போம்:

            import React, { Suspense, lazy } from 'react';

const ProductDetails = lazy(() => import('./ProductDetails'));
const ProductReviews = lazy(() => import('./ProductReviews'));
const RelatedProducts = lazy(() => import('./RelatedProducts'));

function ProductPage() {
  return (
    <div>
      <Suspense fallback={<p>Loading product details...</p>}>
        <ProductDetails />
      </Suspense>

      <div style={{ marginTop: '20px' }}>
        <Suspense fallback={<p>Loading product reviews...</p>}>
          <ProductReviews />
        </Suspense>
      </div>

      <div style={{ marginTop: '20px' }}>
        <Suspense fallback={<p>Loading related products...</p>}>
          <RelatedProducts />
        </Suspense>
      </div>
    </div>
  );
}

export default ProductPage;

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், தயாரிப்புப் பக்கத்தின் ஒவ்வொரு பிரிவும் (தயாரிப்பு விவரங்கள், மதிப்புரைகள் மற்றும் தொடர்புடைய தயாரிப்புகள்) அதன் சொந்த சஸ்பென்ஸ் எல்லைக்குள் சுற்றப்பட்டுள்ளது. இது ஒவ்வொரு பிரிவையும் தனித்தனியாக லோட் செய்ய அனுமதிக்கிறது, இது மேலும் பதிலளிக்கக்கூடிய பயனர் அனுபவத்தை வழங்குகிறது. மேலும், ஒவ்வொரு பிரிவிற்கும் ஒரு தனிப்பயன் ஸ்கெலட்டன் காம்போனென்ட்டை ஒரு ஃபால்பேக்காகப் பயன்படுத்துவதையும் நீங்கள் பரிசீலிக்கலாம், இது பார்வைக்கு கவர்ச்சிகரமான லோடிங் குறிகாட்டியை வழங்கும்.

சிறந்த நடைமுறைகள் மற்றும் பரிசீலனைகள்

ரியாக்ட் சஸ்பென்ஸ் மற்றும் அடுக்கடுக்கான லோடிங் மேலாண்மையுடன் பணிபுரியும் போது, பின்வரும் சிறந்த நடைமுறைகளை மனதில் கொள்வது முக்கியம்:

• சஸ்பென்ஸ் எல்லைகளைச் சிறியதாக வைத்திருங்கள்: சிறிய சஸ்பென்ஸ் எல்லைகள் மேலும் நுணுக்கமான லோடிங் கட்டுப்பாடு மற்றும் சிறந்த பயனர் அனுபவத்தை அனுமதிக்கின்றன. உங்கள் பயன்பாட்டின் பெரிய பகுதிகளை ஒரு ஒற்றை சஸ்பென்ஸ் எல்லைக்குள் சுற்றுவதைத் தவிர்க்கவும்.
• தனிப்பயன் ஃபால்பேக் காம்போனென்ட்களைப் பயன்படுத்துங்கள்: எளிய உரைச் செய்திகளுக்குப் பதிலாக, ஸ்கெலட்டன்கள், ஸ்பின்னர்ஸ் அல்லது புரோக்ரஸ் பார்கள் போன்ற பார்வைக்கு கவர்ச்சிகரமான மற்றும் தகவலறிந்த லோடிங் குறிகாட்டிகளைப் பயன்படுத்தவும்.
• பிழைகளை சீராகக் கையாளுங்கள்: லோடிங் செயல்முறையின் போது ஏற்படும் பிழைகளைப் பிடிக்கவும், பயனர் நட்பு பிழை செய்தியைக் காண்பிக்கவும் பிழை எல்லைகளைப் (Error Boundaries) பயன்படுத்தவும்.
• தரவு மீட்டெடுப்பை மேம்படுத்துங்கள்: தரவு மீட்டெடுப்பு மற்றும் கேச்சிங்கை (caching) எளிதாக்க swr அல்லது react-query போன்ற தரவு மீட்டெடுப்பு நூலகங்களைப் பயன்படுத்தவும்.
• செயல்திறனைக் கருத்தில் கொள்ளுங்கள்: சஸ்பென்ஸ் காம்போனென்ட்களின் அதிகப்படியான அடுக்கடுக்கான அமைப்பைத் தவிர்க்கவும், ஏனெனில் இது செயல்திறனைப் பாதிக்கலாம். ஒரு காம்போனென்ட் தரவை லோட் செய்ய முயற்சிக்கும் எண்ணிக்கையைக் கட்டுப்படுத்த டெபவுன்சிங் மற்றும் த்ரோட்லிங் பயன்படுத்தவும்.
• உங்கள் லோடிங் நிலைகளைச் சோதிக்கவும்: வெவ்வேறு நெட்வொர்க் நிலைமைகளின் கீழ் அவை நல்ல பயனர் அனுபவத்தை வழங்குகின்றன என்பதை உறுதிப்படுத்த உங்கள் லோடிங் நிலைகளை முழுமையாகச் சோதிக்கவும்.

முடிவுரை

ரியாக்ட் சஸ்பென்ஸ் உங்கள் பயன்பாடுகளில் லோடிங் நிலைகளைக் கையாள ஒரு சக்திவாய்ந்த மற்றும் அறிவிப்பு வழியை வழங்குகிறது. குறிப்பாக அடுக்கடுக்கான சஸ்பென்ஸ் மூலம், லோடிங் நிலைகளை எவ்வாறு திறம்படக் கலப்பது என்பதைப் புரிந்துகொள்வதன் மூலம், நீங்கள் மேலும் ஈர்க்கக்கூடிய மற்றும் பதிலளிக்கக்கூடிய பயனர் அனுபவங்களை உருவாக்கலாம். இந்தக் கட்டுரையில் கோடிட்டுக் காட்டப்பட்டுள்ள சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், நீங்கள் ரியாக்ட் சஸ்பென்ஸை முழுமையாகக் கற்றுக்கொண்டு, ஒத்திசைவற்ற சார்புகளைச் சீராகக் கையாளும் வலுவான மற்றும் செயல்திறன் மிக்க பயன்பாடுகளை உருவாக்கலாம்.

பயனர் அனுபவத்திற்கு முன்னுரிமை அளிக்கவும், தகவலறிந்த லோடிங் குறிகாட்டிகளை வழங்கவும், பிழைகளை சீராகக் கையாளவும் நினைவில் கொள்ளுங்கள். கவனமான திட்டமிடல் மற்றும் செயல்படுத்தலுடன், ரியாக்ட் சஸ்பென்ஸ் உங்கள் ஃப்ரண்ட்-எண்ட் மேம்பாட்டு ஆயுதக் கிடங்கில் ஒரு மதிப்புமிக்க கருவியாக இருக்கும்.

இந்த நுட்பங்களை ஏற்றுக்கொள்வதன் மூலம், உங்கள் பயன்பாடுகள் உலகம் முழுவதும் உள்ள பயனர்களுக்கு, அவர்களின் இருப்பிடம் அல்லது நெட்வொர்க் நிலைமைகளைப் பொருட்படுத்தாமல், ஒரு மென்மையான மற்றும் மகிழ்ச்சியான அனுபவத்தை வழங்குவதை நீங்கள் உறுதிப்படுத்தலாம்.